import React from "react";
import { Image, StyleSheet, Text } from "react-native";
import { TextField, TouchableOpacity, View } from "react-native-ui-lib";
import { commonStyles } from "../../configs/commonStyle";
import BasePage from "../BasePage";
import { IconImage } from "../../utils";
import NavigationBar from "../common/NavigationBar";
import ViewUtils from "../../utils/ViewUtils";
import { inject, observer } from "mobx-react";
import moment from "moment";
import { call, setClipboardContent } from "../../utils/util";
import ToastUtils from "../../utils/ToastUtils";

/**
 * 异常工单详情
 */
@inject("userStore", "appStore")
@observer
export default class WorkOrderDetail extends BasePage {

  constructor(props) {
    super(props);
    this.state = {
      content: "",
    };
  }

  /**
   * 异常工单回复
   * @param item
   */
  replyWorkOrderAbnormal = (id) => {
    const { content } = this.state;
    if (IsNullOrEmpty(content)) {
      ToastUtils.showFailInfo("请输入说明");
      return;
    }
    axios.get(api.replyWorkOrderAbnormal, {
      params: {
        id,
        content,
        showLoading: true,
      },
    })
      .then(result => {
        ToastUtils.showSuccessInfo("提交成功");
        this._onBackPress();
      }).catch((e) => {
      logger(e);
      e.msg && ToastUtils.showFailInfo(e.msg);
    });
  };

  render() {
    const { content } = this.state;
    const { item } = this.props.navigation.state.params;
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          title={"异常工单详情"}
          backgroundColor={"transparent"}
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
        />
        <View style={commonStyles.container}>
          <View>
            <View style={styles.titleWrap}>
              <TouchableOpacity activeOpacity={1} onPress={() => setClipboardContent(item?.xmbz_no)}>
                <Text style={commonStyles.text_black_14}>单号：{item?.xmbz_no}</Text>
              </TouchableOpacity>
              <Text
                style={commonStyles.text_black_14}>{moment(item?.deliveryStartTime).format("MM-DD")} {moment(item?.deliveryStartTime).format("HH:mm")}-{moment(item?.deliveryEndTime).format("HH:mm")}</Text>
            </View>
            <View style={styles.contentWrap}>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>状态</Text>
                <Text style={commonStyles.text_blue_13}>{item?.ordStateName}</Text>
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>收货人</Text>
                <Text style={commonStyles.text_black_13}>{item?.receiver_name}</Text>
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>分仓</Text>
                <Text style={commonStyles.text_black_13}>{item?.branch_warehouse}</Text>
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>联系电话</Text>
                {
                  item.receiver_phone && !item.receiver_phone.includes("*") ?
                    <TouchableOpacity onPress={() => call(item?.receiver_phone,item?.ordNo)}>
                      <Text style={commonStyles.text_black_13}>{item?.receiver_phone}</Text>
                    </TouchableOpacity>
                    : <Text style={commonStyles.text_black_13}>{item?.receiver_phone}</Text>
                }
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>地址</Text>
                <View marginL-10 flex right>
                  <Text style={commonStyles.text_black_13}>{item?.receiver_address}</Text>
                </View>
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>渠道</Text>
                <Text style={commonStyles.text_black_13}>{item?.channel_name}</Text>
              </View>
              <View style={{ paddingVertical: 6 }}>
                {
                  item.orderDetailList && item.orderDetailList.map(data => {
                    // logger("订单号", data.isScan == 0 ? data.id : "");
                    return (
                      <View row marginT-5>
                        <Image source={data.isScan == 0 ? IconImage.ic_unchecked : IconImage.ic_checked}
                               style={{ width: 17, height: 17, marginRight: 5 }} />
                        <View flex>
                          <Text
                            style={commonStyles.text_black_13}>{data?.goodsName}（{data?.goodsSpecs}）(x{data?.num}）</Text>
                        </View>
                      </View>
                    );
                  })
                }
              </View>
            </View>
            <View style={styles.line} />
            <View style={styles.reasonWrap}>
              <View style={styles.itemWrap2}>
                <Text style={commonStyles.text_black_13}>异常内容</Text>
                <View flex marginL-10>
                  <Text style={commonStyles.text_black_13}>{item?.abnormal_content}</Text>
                </View>
              </View>
              <View style={styles.itemWrap}>
                <Text style={commonStyles.text_black_13}>处理结果</Text>
                <Text style={commonStyles.text_red_13}>{item?.processing_results}</Text>
              </View>
              <View style={styles.itemWrap3}>
                <Text style={commonStyles.text_black_13}>说明</Text>
                <View style={styles.content}>
                  <TextField
                    multiline
                    hideUnderline
                    black333
                    maxLength={500}
                    defaultValue={content}
                    placeholder={"请输入说明"}
                    style={{ minHeight: 100, textAlignVertical: "top", fontSize: 14, lineHeight: 20 }}
                    onChangeText={content => this.setState({ content })}
                    showCharacterCounter={true}
                  />
                </View>
              </View>
              <View right>
                <TouchableOpacity activeOpacity={1} throttleTime={1000} style={styles.btn}
                                  onPress={() => this.replyWorkOrderAbnormal(item?.id)}>
                  <Text style={commonStyles.text_black}>再次提交</Text>
                </TouchableOpacity>
              </View>
            </View>

          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  titleWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: "#F9D63B",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginTop: 15,
  },

  contentWrap: {
    backgroundColor: "white",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  reasonWrap: {
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
    backgroundColor: "white",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  itemWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 6,
  },
  itemWrap2: {
    justifyContent: "space-between",
    flexDirection: "row",
    paddingVertical: 6,
  },
  itemWrap3: {
    flexDirection: "row",
    paddingVertical: 6,
  },
  line: {
    height: 1,
    backgroundColor: "#EFEFEF",
    marginHorizontal: 15,
  },
  btn: {
    height: 40,
    ...commonStyles.center,
    backgroundColor: "#F9D63B",
    borderRadius: 5,
    width: "100%",
  },
  content: {
    padding: 10,
    borderRadius: 5,
    backgroundColor: "#F7F7F7",
    flex: 1,
    marginLeft: 10,
    marginBottom: 10,
  },
});
